<template>
  <div class="app-container" v-loading="loading">
    <div class="track-con">
      <el-descriptions
        :title="title"
      >
        <template slot="extra">
          <!-- <el-button type="primary" size="small" @click="handlePoint"
            >打印</el-button
          >
          <el-button type="warning" size="small" @click="handleExport"
            >导出</el-button
          > -->
          <el-button size="small" @click="handleRtn">返回</el-button>
        </template>
        <el-descriptions-item label="申请编号"
          >{{trackListObj.serialCode}}</el-descriptions-item
        >
        <el-descriptions-item label="企业名称"
          >{{trackListObj.orgName}}</el-descriptions-item
        >
        <el-descriptions-item label="申请日期">{{trackListObj.applyForTime}}</el-descriptions-item>
        <el-descriptions-item label="当前状态"
          >
            <template>
              <dict-tag :options="dict.type.approval_status" :value="trackListObj.status"/>
            </template>
          </el-descriptions-item
        >
        <!-- <el-descriptions-item label="用户账号"
          >18100000000</el-descriptions-item
        >
        <el-descriptions-item label="海关代码">苏州市</el-descriptions-item> -->
      </el-descriptions>
    </div>
    <el-divider></el-divider>
    <div class="track-time">
        <div class="bus-title">
            <div class="line1"></div>
            <div style="display: inline;margin:0 0 0 15px;font-weight:700">
                <!-- <img src="../../../assets/images/status_show.png" width="50px"/> -->
                总期限</div>
        </div>
        <el-descriptions>
            <el-descriptions-item label="规定处理期限" >{{trackListObj.dueDateNum}}</el-descriptions-item>
            <el-descriptions-item label="规定处理期限超期天数"
            >{{trackListObj.totalTermOverdue}}</el-descriptions-item
            >
        </el-descriptions>
    </div>
     <div class="track-time" v-for="(item,index) in list" :key="index">
        <div class="bus-title">
            <div class="line"></div>
            <div style="display: inline;margin:0 0 0 15px;font-weight:600">{{item.title}}</div>
        </div>
       
        <el-descriptions :column="4">
            <el-descriptions-item label="超期日期">{{item.exceedTime}}</el-descriptions-item>
            <el-descriptions-item label="超期天数">{{item.exceedDays}}</el-descriptions-item>
            <el-descriptions-item label="办理期限">{{item.transactDays}}</el-descriptions-item>
            <el-descriptions-item label="办理日期">{{item.transactTime}}</el-descriptions-item>
        </el-descriptions>
    </div>
  </div>
</template>

<script>
import {listTrace} from '@/api/businessModule/track.js'
export default {
  name: "trackdetail",
   dicts:['approval_status'],
  data() {
    return {
      loading:false,
      title:'',
        list:[
            // {
            //     title:'总期限',
            //     aggreTerm:'2023-08-03',
            //     totalOverdue:'10天',
                
            // },
           
            {
                title:'项目部受理人初审',
                exceedTime:'2023-08-03',//超期
                exceedDays:'10天',
                transactDays:'8天',//办理
                transactTime:'2023-08-01',
            },
             {
                title:'项目部领导复审',
               exceedTime:'2023-08-03',//超期
                exceedDays:'10天',
                transactDays:'8天',//办理
                transactTime:'2023-08-01',
            },
             {
                title:'科技处领导审核',
               exceedTime:'2023-08-03',//超期
                exceedDays:'10天',
                transactDays:'8天',//办理
                transactTime:'2023-08-01',
            },
              {
                title:'科技处业务人员经办',
              exceedTime:'2023-08-03',//超期
                exceedDays:'10天',
                transactDays:'8天',//办理
                transactTime:'2023-08-01',
            },
             {
                title:'分中心人员处理',
               exceedTime:'2023-08-03',//超期
                exceedDays:'10天',
                transactDays:'8天',//办理
                transactTime:'2023-08-01',
            },
             {
                title:'外部人员安装',
               exceedTime:'2023-08-03',//超期
                exceedDays:'10天',
                transactDays:'8天',//办理
                transactTime:'2023-08-01',
            },
            
        ],
        trackListObj:{}
    };
  },
  created(){
    // console.log(this.$route.query);
    if(this.$route.query.serialCode){
       this.getList(this.$route.query.serialCode)
    }
   
  },
  methods: {
    getList(val){
      this.loading=true
      listTrace({
        pageNum: 1,
        pageSize: 100,
        serialCode:val
      }).then(res=>{
        this.loading=false
          this.trackListObj=res.rows[0]?res.rows[0]:{}
          this.title= '应用项目名称：'+res.rows[0].projectName
          this.list.forEach(item=>{
            if(item.title=='项目部受理人初审'){
              item.exceedTime=res.rows[0].xmbslrcsOverdueDate
              item.exceedDays=res.rows[0].xmbslrcsOverdueDay
              item.transactDays=res.rows[0].xmbslrDueDateDay
              item.transactTime=res.rows[0].xmbslrDueDate

            }else if(item.title=='项目部领导复审'){
               item.exceedTime=res.rows[0].xmbldfsOverdueDate
              item.exceedDays=res.rows[0].xmbldfsOverdueDay
              item.transactDays=res.rows[0].xmbldDueDateDay
              item.transactTime=res.rows[0].xmbldDueDate
            }else if(item.title=='科技处领导审核'){
               item.exceedTime=res.rows[0].kjcldshOverdueDate
              item.exceedDays=res.rows[0].kjcldshOverdueDay
              item.transactDays=res.rows[0].kjcldDueDateDay
              item.transactTime=res.rows[0].kjcldDueDate
            }else if(item.title=='科技处业务人员经办'){
               item.exceedTime=res.rows[0].kjcywryjbOverdueDate
              item.exceedDays=res.rows[0].kjcywryjbOverdueDay
              item.transactDays=res.rows[0].kjcywryDueDateDay
              item.transactTime=res.rows[0].kjcywryDueDate
            }else if(item.title=='分中心人员处理'){
               item.exceedTime=res.rows[0].fzxryclOverdueDate
              item.exceedDays=res.rows[0].fzxryclOverdueDay
              item.transactDays=res.rows[0].fzxryDueDateDay
              item.transactTime=res.rows[0].fzxryDueDate
            }else if(item.title=='外部人员安装'){
               item.exceedTime=res.rows[0].wbgsryazOverdueDate
              item.exceedDays=res.rows[0].wbgsryazOverdueDay
              item.transactDays=res.rows[0].wbgsryDueDateDay
              item.transactTime=res.rows[0].wbgsryDueDate
            }
          })


      }).catch(err=>{
        this.loading=false
           this.trackListObj={}
      })
    },
    handlePoint() {

    },
    handleExport() {
        
    },
    handleRtn() {
        this.$router.push('/businessModule/statistics/track')
      //this.$router.back(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.track-con {
  padding: 1% 1% 0 1%;
  ::v-deep .el-descriptions__title{
    font-size: 18px;
  }
 ::v-deep .el-descriptions-item__container{
    font-weight: 600;
  }
}

::v-deep .el-descriptions-item__cell {
  padding: 15px;
}
.track-time {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 1%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
 
}

.line1 {
  height: 80px;
  width: 5px;
  background: #67C23A;
 //background-color: #409EFF;
  display: inline-block;
}
.line {
  height: 80px;
  width: 5px;
  //background: rgba(19, 206, 162, 0.8);
 background-color: #409EFF;
  display: inline-block;
}
.time-item {
  display: inline-block;
}
.bus-title{
    width: 15%;
    display: flex;
    align-items: center;
}
.el-descriptions{
   flex: 1;
   
}
</style>

